<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 省  -->
    <select name="province"></select>
    <!-- 市 -->
    <select name="city"></select>
    <!-- 区 -->
    <select name="area"></select>
    <script src="../lib/axios.js"></script>
    <script>
      // 基地址
      axios.defaults.baseURL = "http://ajax-api.itheima.net";

      /* 
     拿三个原生的select标签，实现 功能即可 
     1 一打开页面  省数据已经渲染好了，市 和 区不用处理 
     2 给 省 select 绑定 change 事件 省切换的时候，对应 市 和 区 改变
      1 绑定 change 事件 
      2 获取选中的值，传递给 获取市函数 。。。。 
     3 给 市 select 绑定 change 事件 市切换的时候，对应 区改变
     */

      //  获取dom元素
      const province = document.querySelector("[name=province]");
      const city = document.querySelector("[name=city]");
      const area = document.querySelector("[name=area]");

      // 统一发送请求 渲染页面的函数
      async function getData(url, params, target) {
        const result = await axios({ url, params });
        const options = result.data.data.reduce(
          (beforeHTML, item) =>
            beforeHTML + `<option value="${item}">${item}</option>`,
          ""
        );
        target.innerHTML = options;
      }

      // 获取省
      async function getProvince() {
        await getData("/api/province", {}, province); // 获取省 // 异步！！！
      }
      // 获取市
      async function getCity() {
        await getData("/api/city", { pname: province.value }, city); // 异步
      }
      // 获取区
      async function getArea() {
        getData(
          "/api/area",
          { pname: province.value, cname: city.value },
          area
        );
      }

      async function init() {
        await getProvince();
        // 根据省来获取市
        await getCity();
        // 根据省-市 获取区
        await getArea();
      }
      init();

      // 省 绑定事件
      province.addEventListener("change", async function (e) {
        // 根据省来获取市
        await getCity();
        await getArea();
      });
      // 市 绑定事件
      city.addEventListener("change", async function (e) {
        await getArea();
      });
    </script>
  </body>
</html>
